<template>
  <div class="classify">
    <div class="container">
      <div v-if="classifyList.length != 0" class="classify_cont flex">
        <div class="classify_one">
          <img :src="classifyList[0].image" alt="">
          <div class="classify_text">
            <h2>{{classifyList[0].title}}</h2>
            <p>{{classifyList[0].text}}</p>
          </div>
        </div>
        <div class="classify_two">
          <div class="column_top">
            <img :src="classifyList[1].image" alt="img">
            <div class="classify_text">
              <h2>{{classifyList[1].title}}</h2>
              <p>{{classifyList[1].text}}</p>
            </div>
          </div>
          <div class="column_bottom">
            <img :src="classifyList[2].image" alt="img">
            <div class="classify_text">
              <h2>{{classifyList[2].title}}</h2>
              <p>{{classifyList[2].text}}</p>
            </div>
          </div>
        </div>
        <div class="classify_three">
            <img :src="classifyList[3].image" alt="img">
            <div class="classify_text">
              <h2>{{classifyList[3].title}}</h2>
              <p>{{classifyList[3].text}}</p>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      classifyList: []
    }
  },
  async created () {
    const { data: res } = await this.$http.get('classify')
    this.classifyList = res.data
  }
}
</script>

<style lang="less" scoped>
.classify_cont{
  flex-wrap: wrap;
}
.classify{
  padding: 3.125rem 0;
}
.classify_one{
  width: 48%;
  position: relative;
  img{
    width: 100%;
    height: 100%;
  }
}
.classify_two{
  width: 24%;
  display: flex;
  flex-direction: column;
  img{
    width: 100%;
    height: 100%;
  }
  .column_top{
    margin-bottom: 0.5rem;
    position: relative;
  }
  .column_bottom{
    position: relative;
  }
}
.classify_three{
  width: 24%;
   position: relative;
  img{
    width: 100%;
    height: 100%;
  }
}
.classify_text{
  position: absolute;
  left: 1.1rem;
  top: 1.25rem;
  transition: all 0.5s;
  h2{
    font-size: 0.625rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.3125;
    transition: all 0.5s;
    cursor: pointer;
  }
  p{
    font-size: 0.44rem;
    color: #7e7e7e;
    margin-left: -7px;
  }
}
.classify_text h2:hover{
  color: #eb2323;
}
@media screen and (max-width:992px){
  .classify_one{
    width: 100%;
  }
  .classify_two,.classify_three{
    width: 48%;
    margin-top: 1rem;
  }
}
@media screen and (max-width:768px){
  .classify_two,.classify_three{
    width: 100%;
  }
  .classify_text{
    h2{
      font-size: 1rem;
    }
    p{
      font-size: 0.8rem;
    }
  }
}
</style>
